import React, { useState } from 'react'
import { Image, Text, View, navigateTo } from 'remax/one'
import RecycleView from 'remax-recycle-view/lib'
import { Button, Icon, Row, Space, Tag } from 'annar'
import useCloud from '@/hooks/use-cloud'
import styles from './index.css'

const PromotionItem = ({
  _id,
  name,
  description,
  imgUrls,
  price,
  originalPrice,
  quota,
  audit,
}: WBG.Promotion) => {
  return (
    <View className={styles.itemArea}>
      <View
        className={styles.itemBox}
        hoverClassName="hover"
        onTap={() => {
          navigateTo({ url: `/pages/promotion/index?_id=${_id}` })
        }}
      >
        <Row className={styles.fullHeight} align="middle">
          <Space className={styles.itemBoxLeft} direction="vertical" size={6}>
            <Image
              className={styles.avatarImg}
              src={imgUrls[0]}
              mode="aspectFill"
            />
            {audit?.status === 1 ? (
              <Tag color="green">审核已通过</Tag>
            ) : audit?.status === 2 ? (
              <Tag color="red">审核未通过</Tag>
            ) : (
              <Tag color="yellow">审核中</Tag>
            )}
          </Space>
          <Space className={styles.itemBoxRight} direction="vertical" size={12}>
            <View className="large-text ellipsis">{name}</View>
            <View className="small-text ellipsis">{description}</View>
            <Row className={styles.centerText} justify="space-around">
              <View>
                <View>
                  <Text className="small-text">￥</Text>
                  <Text className="large-text">0</Text>
                </View>
                <Text className="small-text">直接营业额</Text>
              </View>
              <View>
                <View>
                  <Text className="large-text">0</Text>
                  <Text className="small-text">人</Text>
                </View>
                <Text className="small-text">引流人数</Text>
              </View>
            </Row>
            <Space align="center" size={12}>
              <Text className={styles.alarmText}>￥{price}</Text>
              <Text className={styles.deletedText}>￥{originalPrice}</Text>
            </Space>
          </Space>
        </Row>
      </View>
    </View>
  )
}

export default () => {
  const { data, mutate } = useCloud('list-promotion')
  const [loading, setLoading] = useState(false)

  return (
    <>
      <View className={styles.addArea}>
        <Button
          className={styles.addButton}
          type="primary"
          onTap={() => {
            navigateTo({ url: `/pages/promotion-add/index` })
          }}
        >
          <Icon type="add" color="#fff" />
        </Button>
      </View>
      {data &&
        (data.length ? (
          <RecycleView
            className={styles.mainArea}
            refresherEnabled
            refresherTriggered={loading}
            onRefresherRefresh={async () => {
              setLoading(true)
              await mutate()
              setLoading(false)
            }}
            data={data.map((v: WBG.Promotion) => ({ ...v, height: 350 }))}
            renderItem={(item, index) => {
              return <PromotionItem {...((item as unknown) as WBG.Promotion)} />
            }}
          />
        ) : (
          <View className="empty-view small-text">您没有添加过广告</View>
        ))}
    </>
  )
}
